<template>
	<!-- <cusNavVue title="地图找房" bgColor="#ff0000"></cusNavVue> -->
	<diyNavVue title="地图找房" bgColor="#ff0000"></diyNavVue>
	<view class="page-content">
		<view class="">
			地图页面 <text @click="selectAddress">选择地址</text>
		</view>
		<map :latitude="latitude" @callouttap="goDetail" @markertap="goDetail" :longitude="longitude" :markers="markers" style="width: 100vw;height: calc(100vh - 280rpx);"></map>
	</view>
	<diy-tab></diy-tab>
</template>

<script setup>
	import diyNavVue from '../../components/diy-nav/diy-nav.vue';
	// import cusNavVue from '../../components/cus-nav/cus-nav.vue';
	// import custTabVue from '../../components/cust-tab/cust-tab.vue';
	import diyTabVue from '../../components/diy-tab/diy-tab.vue';
	import { ref } from 'vue';
	const longitude = ref(116.39742)
	const latitude = ref(39.909)
	const markers = ref([])
	const getCurLocation = () => {
		console.log('获取定位')
		// 一打开页面定位，获取默认位置
		uni.getLocation({
			success(res) {
				console.log(res)
				longitude.value = res.longitude
				latitude.value = res.latitude
				markers.value = [
					{
						id: 1,
						longitude: res.longitude,
						latitude: res.latitude,
						height: 30,
						width: 20
					}
				]
			}
		})
	}
	getCurLocation()
	const getHouseList = () => {
		uniCloud.callFunction({
			name: 'houseList',
			data: {
				longitude: longitude.value,
				latitude: latitude.value
			},
			success(res) {
				console.log(res)
				const {data} = res.result
				data.map(item=> {
					console.log(item._id)
					if(item.longitude && item.latitude) {
						markers.value.push({
							id: parseInt(item._id),
							longitude: item.longitude,
							latitude: item.latitude,
							iconPath: '/static/icon/circle.png',
							width: 80,
							height: 80,
							callout: {
								content: `${item.unitPrice || 6666} \n 元/m²`,
								color: '#fff',
								bgColor: '#ffffff00',
								display: 'ALWAYS',
								textAlign: 'center',
								fontSize: 14,
								anchorY: 60
							}
						})
					}
				})
			}
		})
	}
	const selectAddress = () => {
		console.log('选择地址')
		uni.chooseLocation({
			success(res) {
				console.log(res)
				longitude.value = res.longitude
				latitude.value = res.latitude
				// 选完地址之后，以选的地址为中心店渲染地图，并打点
				markers.value = [
					{
						id: 1,
						longitude: res.longitude,
						latitude: res.latitude,
						height: 30,
						width: 20
					}
				]
				// 搜索附近的房源
				getHouseList()
			}
		})
	}
	const goDetail = (e) => {
		console.log(e)
		uni.navigateTo({
			url: `/moduleA/detail/detail?id=${e.detail.markerId}`
		})
	}
</script>

<style lang="scss" scoped>
	.page-content{
		padding-top: 140rpx;
	}
</style>